<template>
  <div id="MSFG">
    <div class="flow_region">
      <div class="nodes-wrap">
        <div v-for="item in nodeTypeList" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
          <div class="log"><img :src="nodeCss[item.type].logImg" alt=""></div>
          <div class="name">{{ item.typeName }}</div>
        </div>
      </div>
      <div id="flowWrap" ref="flowWrap" class="flow-wrap" @drop="drop($event)" @dragover="allowDrop($event)">
        <div id="flow">
          <div
            v-show="auxiliaryLine.isShowXLine"
            class="auxiliary-line-x"
            :style="{width: auxiliaryLinePos.width, top:auxiliaryLinePos.y + 'px', left: auxiliaryLinePos.offsetX + 'px'}"></div>
          <div
            v-show="auxiliaryLine.isShowYLine"
            class="auxiliary-line-y"
            :style="{height: auxiliaryLinePos.height, left:auxiliaryLinePos.x + 'px', top: auxiliaryLinePos.offsetY + 'px'}"></div>
          <flowNode
            v-for="item in data.nodeList"
            :id="item.id"
            :key="item.id"
            :node="item"
            @setNodeName="setNodeName"
            @deleteNode = "deleteNode"
            @changeLineState="changeLineState"
            @edit-sub="$emit('edit-sub', $event)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jsPlumb } from "jsplumb"
import { nodeTypeList, nodeTypeListSub, nodeCss } from './config/init'
import { jsplumbSetting, jsplumbConnectOptions, jsplumbSourceOptions, jsplumbTargetOptions } from './config/commonConfig'
import methods from "./config/methods"
import flowNode from "./components/node-item"

export default {
  name: 'MSFG',
  components: {
    flowNode: flowNode
  },
  props: {
    data: Object,
    refresh: Number,
    sub: {
      type: Boolean,
      default: false
    },
    subID: String,
    linkDataReserve: Boolean
  },
  data () {
    return {
      jsPlumb: null,
      currentItem: null,
      nodeCss: nodeCss,
      nodeTypeObj: {},
      jsplumbSetting: jsplumbSetting,
      jsplumbConnectOptions: jsplumbConnectOptions,// jsplumb连接参数
      jsplumbSourceOptions: jsplumbSourceOptions,// jsplumb触发连线参数
      jsplumbTargetOptions: jsplumbTargetOptions,// jsplumb结束连线参数

      // 辅助线参数
      auxiliaryLine: { isShowXLine: false, isShowYLine: false},  //对齐辅助线是否显示
      auxiliaryLinePos: { width: '100%', height: '100%', offsetX: 0, offsetY: 0, x: 20, y: 20 },

      commonGrid:[5,5],//节点移动最小距离
      multiSelectModuleFlag:false,//多选标识
      multiSelectRectAngle: {
        px: '',  //多选框绘制时的起始点横坐标
        py: '',  //多选框绘制时的起始点纵坐标
        left: 0,
        top: 0,
        height: 0,
        width: 0
      }
    }
  },
  computed: {
    nodeTypeList: function () {
      return this.sub ? nodeTypeListSub.concat(nodeTypeList) : nodeTypeList
    }
  },
  mounted() {
    // Initialize jsPlumb
    this.jsPlumb = jsPlumb.getInstance()
    this.initNodeTypeObj()
    // this.fixNodePosition()
    // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。
    this.$nextTick(() => {
      this.init()
    })
  },
  methods:{
    ...methods,
    initNodeTypeObj () {
      nodeTypeList.map(v => {
        this.nodeTypeObj[v.type] = v
      })
    },
  },
  watch: {
    refresh () {
      this.jsPlumb.deleteEveryConnection()
      this.jsPlumb.deleteEveryEndpoint()
      this.$emit('update:linkDataReserve', false)
      this.$nextTick(() => {
        this.init()
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.flow_region {
  display: flex;
  width: 180vh;
  height: 85vh;
  margin: 0px auto;
  border: 1px solid #ccc;
  background: #fdfefe;
  .nodes-wrap {
    width: 150px;
    height: 100%;
    border-right: 1px solid rgb(6, 6, 6);
    .node {
      display: flex;
      height: 40px;
      width: 80%;
      margin: 5px auto;
      border: 1px solid rgb(202, 132, 132);
      line-height: 40px;
      &:hover{
        cursor: grab;
      }
      &:active{
        cursor: grabbing;
      }
      .log {
        width: 40px;
        height: 40px;
      }
      .name {
        width: 0;
        flex-grow: 1;
      }
    }
  }
  .flow-wrap {
    height: 100%;
    position: relative;
    overflow: hidden;
    outline: none !important;
    flex-grow: 1;
    background-image: url("../assets/point.png");
    #flow {
      position: relative;
      width: 100%;
      height: 100%;
      .auxiliary-line-x {
        position: absolute;
        border: .5px dashed #2ab1e8;
        z-index: 9999;
      }
      .auxiliary-line-y {
        position: absolute;
        border: .5px dashed #2ab1e8;
        z-index: 9999;
      }
    }
  }
}
</style>
